<script setup lang="ts">
import { onMounted, ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks, FormProps } from "@/views/hooks";
import { getMenuList, Menu } from "@/api/system";
import { handleTree } from "@/utils/tree";

const props = withDefaults(defineProps<FormProps<Menu>>(), {
  formInline: () => ({
    id: "",
    parentId: "",
    path: "",
    component: "",
    title: "",
    name: "",
    icon: "",
    frameSrc: "",
    state: true,
    sort: 1,
    showLink: true,
    keepAlive: false,
    type: "MENU_TYPE_FOLDER"
  })
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const options = ref<Array<any>>([]);
const isPage = ref<boolean>(false);
const isUrl = ref<boolean>(false);
const isIframe = ref<boolean>(false);

function getRef() {
  return ruleFormRef.value;
}

function dictChange(val: string, keep: boolean) {
  if (val === "MENU_TYPE_FOLDER") {
    isPage.value = false;
    isUrl.value = false;
    isIframe.value = false;
  } else if (val === "MENU_TYPE_PAGE") {
    isPage.value = true;
    isUrl.value = false;
    isIframe.value = false;
  } else if (val === "MENU_TYPE_URL") {
    isPage.value = false;
    isUrl.value = true;
    isIframe.value = false;
  } else if (val === "MENU_TYPE_IFRAME") {
    isPage.value = false;
    isUrl.value = false;
    isIframe.value = true;
  }
  if (!keep) {
    newFormInline.value.name = "";
  }
}

function loadMenuTop() {
  getMenuList({ state: true }).then(data => {
    options.value = handleTree(data); // 处理成树结构
  });
}

onMounted(() => {
  loadMenuTop();
  dictChange(props.formInline.type, true);
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col>
        <el-form-item label="上级菜单" prop="parentId">
          <el-cascader
            v-model="newFormInline.parentId"
            class="w-full"
            :options="options"
            :props="{
              value: 'id',
              label: 'title',
              leaf: 'isLeaf',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            placeholder="请选择上级菜单"
          >
            <template #default="{ node, data }">
              <span>{{ data.title }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="菜单类型" prop="type">
          <DictOption
            v-model="newFormInline.type"
            code="MENU_TYPE"
            type="radio"
            placeholder="请选择菜单类型"
            @change="dictChange"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="newFormInline.icon" clearable>
            <template v-slot:append>
              <IconifyIconOnline :icon="newFormInline.icon" />
            </template>
          </el-input>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单名称" prop="title">
          <el-input
            v-model="newFormInline.title"
            clearable
            placeholder="请输入菜单名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单路径" prop="path">
          <el-input
            v-model="newFormInline.path"
            clearable
            placeholder="请输入菜单路径"
          />
        </el-form-item>
      </re-col>

      <re-col v-if="isPage" :value="12" :xs="24" :sm="24">
        <el-form-item label="组件路径" prop="component">
          <el-input
            v-model="newFormInline.component"
            clearable
            placeholder="请输入组件路径"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="isPage || isIframe" :value="12" :xs="24" :sm="24">
        <el-form-item label="组件名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入组件名称"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="isUrl">
        <el-form-item label="外链路径" prop="name2">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入外链路径"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="isIframe">
        <el-form-item label="内嵌链接" prop="frameSrc">
          <el-input
            v-model="newFormInline.frameSrc"
            clearable
            placeholder="请输入内嵌iframe链接"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="newFormInline.sort"
            :min="1"
            :max="9999"
            controls-position="right"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="isPage" :value="12" :xs="24" :sm="24">
        <el-form-item label="是否缓存" prop="keepAlive">
          <el-switch
            v-model="newFormInline.keepAlive"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text="是"
            inactive-text="否"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单状态">
          <el-switch
            v-model="newFormInline.state"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
